# CSS3 text-shadow Property

## Example

Basic text-shadow:

h1 {
text-shadow: 2px 2px #ff0000;
}
Try it yourself »

More "Try it Yourself" examples below.

## Definition and Usage

The text-shadow property adds shadow to text.

This property accepts a comma-separated list of shadows to be applied to the text.

Default value: | none
Inherited: | yes
Animatable: | yes. Read about animatable Try it
Version: | CSS3
JavaScript syntax: | object.style.textShadow="2px 5px 5px red" Try it

## Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property |  |  |  |  |
--- | --- | --- | --- | --- | ---
text-shadow | 4.0 | 10.0 | 3.5 | 4.0 | 9.6

## CSS Syntax

text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;

Note: To add more than one shadow to the text, add a comma-separated list of shadows.

## Property Values

Value | Description | Play it
--- | --- | ---
h-shadow | Required. The position of the horizontal shadow. Negative values are allowed | Play it »
v-shadow | Required. The position of the vertical shadow. Negative values are allowed | Play it »
blur-radius | Optional. The blur radius. Default value is 0 | Play it »
color | Optional. The color of the shadow. Look at CSS Color Values for a complete list of possible color values | Play it »
none | Default value. No shadow | Play it »
initial | Sets this property to its default value. Read about initial | Play it »
inherit | Inherits this property from its parent element. Read about inherit |

## More Examples

## Example

This example demonstrates a text-shadow with a blur effect:

h1 {
text-shadow: 2px 2px 8px #FF0000;
}
Try it yourself »

## Example

This example demonstrates text-shadow on a white text:

h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
Try it yourself »

## Example

This example demonstrates text-shadow with a red neon glow:

h1 {
text-shadow: 0 0 3px #FF0000;
}
Try it yourself »

## Example

This example demonstrates text-shadow with a red and blue neon glow:

h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
Try it yourself »

## Related Pages

CSS3 tutorial: CSS3 Text Effects

HTML DOM reference: textShadow property

### WEB HOSTING

UK Reseller Hosting

### WEB BUILDING

FREE Website BUILDER Free HTML5 Templates

### W3SCHOOLS EXAMS

HTML, CSS, JavaScript, PHP, jQuery, XML, and ASP Certifications

### SHARE THIS PAGE

### Color Picker

### HTML/CSS

HTML Tutorial HTML5 Tutorial CSS Tutorial CSS3 Tutorial Bootstrap Tutorial

### JavaScript

JavaScript Tutorial jQuery Tutorial jQuery Mobile Tutorial AngularJS Tutorial AJAX Tutorial JSON Tutorial

### Graphics

Canvas Tutorial SVG Tutorial Google Maps Tutorial

### Server Side

SQL Tutorial PHP Tutorial ASP Tutorial ASP.NET Tutorial VBScript Tutorial AppML Tutorial

### Web

Web Building Web Statistics Web Certification

### XML

XML Tutorial DTD Tutorial Schema Tutorial XML DOM Tutorial XPath Tutorial XSLT Tutorial XQuery Tutorial XSL-FO Tutorial RSS Tutorial WSDL Tutorial

### HTML/CSS

HTML Tag Reference HTML Event Reference HTML Color Reference CSS 1,2,3 Reference Bootstrap Reference

### JavaScript

JavaScript Reference HTML DOM Reference jQuery Reference jQuery Mobile Reference Google Maps Reference

### Server Side

PHP Reference SQL Reference ASP Reference VBScript Reference Razor Reference ASP.NET Reference

### XML

XML DOM Reference XSLT Reference XSL-FO Reference XPath Reference XQuery Reference Schema Reference RSS Reference SVG Reference

### HTML Charsets

HTML Character Sets HTML ASCII HTML ANSI HTML Windows-1252 HTML ISO-8859-1 HTML Symbols HTML UTF-8

### HTML/CSS

HTML Examples CSS Examples

### Browser Scripting

JavaScript Examples HTML DOM Examples jQuery Examples jQuery Mobile Examples AngularJS Examples AJAX Examples

### Server Scripting

PHP Examples ASP Examples VBScript Examples Razor Examples .NET Examples

### XML Languages

XML Examples DTD Examples XML DOM Examples XSL Examples XSLT Examples XPath Examples XQuery Examples Schema Examples RSS Examples SVG Examples